<template>
  <Dialog  v-model="visible" title="变更详情" :width="1200">
    <CodeDiff
      :old-string="oldData"
      :new-string="newData"
      filename="变更前"
      newFilename="变更后"
      language="JSON"
      output-format="side-by-side"
    />
  </Dialog>
</template>

<script setup lang="ts">
  import { ref, unref, nextTick, watch, reactive } from 'vue'
import { CodeDiff } from 'v-code-diff'
  const visible = ref(false)
  const oldData = ref()
  const newData = ref()

  const openDialog = (row?: any) => {
    oldData.value = JSON.stringify(JSON.parse(row.beforeContent), null, '\t')
    newData.value = JSON.stringify(JSON.parse(row.afterContent), null, '\t')
    visible.value = true
  }

  defineExpose({
    openDialog
  })
</script>

